<template>
    <div class="exchange-ok">
        <div class="exchange-ok-wrapper">
            <i class="requireLogin"></i><b>兑换成功</b>
            <!--<i class="oh-icon"></i><b>兑换失败</b>-->
        </div>

        <div class="gray-box"></div>

        <div class="copy-wrapper">
            <div class="copy-box">
                <h4>
                    卡密/充值卡密码
                </h4>
                <h3>8988 9898 9838 2382 3888</h3>
                <p>提示：非常重要，务必妥善保管不要外泄！</p>
            </div>
            <div class="copy-box1">
                <div class="copy-btn" data-clipboard-text="89889898983823823888" @click="copy" >复制</div>
            </div>
        </div>

        <div class="gray-box"></div>

        <div class="gray-view">
        <div class="panel tab-panel">
            <h3>使用流程</h3>
            <div class="intro">
                <p>驾优手机用户。</p>
                <p></p>
                <p>1、充值查询：</p>
                <p>1）充值前，建议用户查询话费余额，如停机，请查询欠费金额以便您选择足以抵扣的话费面值。</p>
                <p>2）充值后，可拨打运营商客服10086进行查询或凭借服务密码登陆网上营业厅查询缴费记录，停机充值用户，建议重新开机进行查询。</p>
                <p>3）或者拨打客服400-611-5718</p>
            </div>
        </div>
        <div class="panel tab-panel">
            <h3>使用规则</h3>
            <div class="intro">
                <p>到账时间：</p>
                <p>系统会在1-10分钟内自动完成充值，运营商系统异常情况下，会出现延迟到帐，具体到账时间以运营商系统缴费时间为准。</p>
                <p>充值号码：</p>
                <p>请您充值前务必仔细核对充值的手机号码，支付完成后，系统自动提交充值，将无法拦截，一旦充值成功，将无法进行退款。</p>
                <p>充值发票：</p>
                <p>充值前请咨询当地运营商是否可打印发票。</p>
                <p>分次到账：</p>
                <p>所购买面值如遇产品库存不足，系统将自动凑单，分多个面值拼凑为您进行充值，请您谅解。</p>
            </div>
        </div>
        </div>

        <div class="gray-box"></div>

        <div class="pg-box">
            <table class="pg-info-table">
                <tr>
                    <td class="wd">支付金额：</td>
                    <td>200优点 <span class="ml2 text-orange">待支付</span></td>
                </tr>
                <tr>
                    <td>订单编号：</td>
                    <td>6376836483648383683836</td>
                </tr>
                <tr>
                    <td>下单时间：</td>
                    <td>2018-8-23  18:23:45</td>
                </tr>
            </table>
        </div>



        <div class="gray-box"></div>
        <div class="pg-box">
            <div class="pg-row">
                <div class="pg-half">
                    <div class="btn-black">再次兑换</div>
                </div>
                <div class="pg-half">
                    <a class="btn-gold"><span class="mt1">联系客服 <br> 400-800-7878</span></a>
                </div>
            </div>
        </div>

    </div>
</template>


<script>
    import Clipboard from 'clipboard';
    export default {
        data() {
            return {
            }
        },
        methods: {
            copy() {
                let clipboard = new Clipboard('.copy-btn');
                clipboard.on('success', e => {
                    // 释放内存
                    clipboard.destroy();
                    return this.$vux.toast.show({
                        text: '复制成功',
                        type: 'text',
                        position: 'middle'
                    });
                });
                clipboard.on('error', e => {
                    // 不支持复制
                    return this.$vux.toast.show({
                        text: '该浏览器不支持自动复制',
                        type: 'text',
                        position: 'middle'
                    });
                    // 释放内存
                    clipboard.destroy();
                })
            }
        },
        mounted() {
            document.title = '兑换成功';
        }
    }
</script>

<style lang="less" scoped>
    .pg-row{
        margin-left:-.15rem;
        margin-right:-.15rem;
        display: flex;
    }
    .pg-half{
        padding: 0 .15rem;
        width: 50%;
    }
    .gray-box{
        height: .25rem;
        background:#fafafa;
    }
    .gray-view{
        background:#fafafa;
    }
    .exchange-ok-wrapper{
        height: 1.85rem;
        background-image: url(./../../static/img/exchange_bg.jpg);
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        position: relative;
        font-size: 0;
        text-align: center;
    }
    .requireLogin,.oh-icon{
        position: relative;
        display: inline-block;
        width: .4rem;
        height: .4rem;
        background-image: url(./../../static/img/ok_icon.png);
        background-size:contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        margin-right: 0.15rem;
        margin-top: -.2rem;
        top: 50%;
    }
    .oh-icon{
        background-image: url(./../../static/img/oh_icon.png);
    }
    .exchange-ok-wrapper b{
        font-size: .36rem;
        color:#d0a87e;
        line-height: 1.85rem;
        vertical-align: top;
        font-weight: 400;
    }
    .exchange-ok-article{
        position: absolute;
        bottom:-.86rem;
        height: 1.78rem;
        left:10%;
        right:10%;
        background:#fff;
        border-radius:10px;
        font-size: 0;
        text-align: center;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }
    .exchange-ok-article span{
        font-size: .32rem;
        color:#333;
        line-height: 1.78rem;
        vertical-align: top;
        font-weight: 800;
    }
    .logos{
        vertical-align: top;
        display: inline-block;
        width: .78rem;
        height: .78rem;
        margin-top: .5rem;
        margin-right: .1rem;
        background-image: url(./../../static/img/logos.png);
        background-size:contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    .copy-wrapper{
        display: flex;
        justify-content:space-between;
        padding: .2rem;
        background: #fff;
        align-items: center;
    }
    .copy-box{
        flex: 4;
    }
    .copy-box h4{
        height: .55rem;
        line-height: .55rem;
        font-size: .3rem;
    }
    .copy-box h3{
        height: .55rem;
        line-height: .55rem;
        font-size: .32rem;
        font-family: 'Times New Roman';
    }
    .copy-box p{
        font-size: .24rem;
        color:#f9a721;
        height: .45rem;
        line-height: .45rem;
    }

    .copy-box1{
        flex: 1;
        text-align: right;
    }
    .copy-btn{
        display: inline-block;
        padding: 0 1em;
        height: .56rem;
        line-height: .56rem;
        color: #ffd791;
        font-size: .3rem;
        text-align: center;
        background:-moz-linear-gradient(top,#0b0b0b,#333131);
        background:-webkit-linear-gradient(top,#0b0b0b,#333131);
        background:#333;
        border-radius:4px;
        cursor: pointer;
    }

    .exchange-ok-wrapper{
        display: block;
        width: 100%;
    }
    .pg-box{
        padding: .2rem .2rem .45rem;
        background:#fff;
    }
    .pg-box .pg-info-table{
        width: 100%;
        font-weight: 600;
    }
    .wd{
        width: 5.5em;
    }
    .gray-font{
        color:#666;
    }
    .pg-box .pg-info-table tr{
        height: .55rem;
    }
    .pg-box .pg-info-table tr td{
        line-height: .45rem;
        font-size: .26rem;
    }


    .merchandise-table-box{
        padding: 0 .2rem .3rem;
        background:#fff;
    }
    .merchandise-table-box .merchandise-table{
        width: 100%;
    }
    .merchandise-table-box .merchandise-table tr{
        height: .55rem;
    }
    .merchandise-table-box .merchandise-table tr td{
        line-height: .45rem;
        font-size: .26rem;
    }

    .merchandise-box{
        margin:0 .2rem .2rem;
        height: 3.2rem;
        position: relative;
        list-style: none;
        border-radius:10px;
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    .merchandise-box h2,.merchandise-box h6{
        font-size: .36rem;
        color: #eac486;
        white-space: nowrap;;
        text-align: left;
        text-overflow:ellipsis;
        overflow: hidden;
        width: 100%;
        padding: .4rem .3rem 0.1rem .3rem;
    }
    .merchandise-box h6{
        font-size: .24rem;
        padding-top:0;
        vertical-align: top;
    }
    .merchandise-box h1{
        font-size: .36rem;
        color: #eac486;
        white-space: nowrap;;
        text-align:right;
        text-overflow:ellipsis;
        overflow: hidden;
        position: absolute;
        right: .4rem;
        bottom:.08rem;
    }
    .merchandise-box h1 b{
        font-size: .72rem;
        color: #eac486;
        vertical-align: baseline;
        margin-right: 4px;
    }
    .merchandise-box h1 span{
        vertical-align:.02rem;
        font-size: .24rem;
    }




    .panel {
    &:not(:last-child) {
         margin-bottom: 0.25rem;
     }
    & > h3 {
          margin-bottom: 0.25rem;
      }
    padding: 0.4rem 0.2rem;
    background-color: #fff;
    }
    .banner-recharge {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        height: 2.48rem;
        padding: 0.35rem;
        border-radius: 0.25rem;
        background: url(/static/img/mbg1.jpg) no-repeat;
        background-size: 100% 100%;
        color: #e4c48e;
    div:last-child {
        text-align: right;
    }
    p {
        margin-top: 0.05rem;
    }
    b {
        font-size: 0.8rem;
        line-height: 1;
    }
    }
    .banner-voucher {
        font-size: 0.32rem;
        text-align: center;
        color: #666;
    div {
        font-size: 0.28rem;
    }
    del {
        margin-left: 0.2rem;
        margin-right: -1.85rem;
        color: #999;
    }
    p {
        margin-top: 0.2rem;
    }
    b {
        font-size: 0.8rem;
        font-weight: 300;
        line-height: 1;
        color: #444;
    }
    }
    .banner-items {
        padding: 0.2rem 0.1rem;
        font-size: 0.28rem;
    ul {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        padding-bottom: 0.2rem;
    li {
        flex: 1 1 30%;
        list-style: none;
        margin-top: 0.2rem;
    &:nth-child(even) {
         flex: 1 1 70%;
     }
    }
    }
    }
    .banner-recharge-xs {
        display: flex;
        justify-content: space-between;
    li {
        flex: 1;
        max-width: 48.8%;
        list-style: none;
    .banner-recharge {
        height: 1.171rem;
        padding: 0.2rem;
        font-size: 0.14rem;
    b {
        font-size: 0.4rem;
    }
    }
    }
    }
    .intro {
        font-size: 0.28rem;
        color: #666;
        p {
            margin-top: 0;
            line-height: 1.6;
        }
    }

    .btn-black,.btn-gold{
        display: block;
        width:100%;
        height: .9rem;
        line-height: .9rem;
        margin-top:.75rem;
        color: #fff;
        font-size: .28rem;
        text-align: center;
        background:#0b0b0b;
        background:-moz-linear-gradient(top,#0b0b0b,#333131);
        background:-webkit-linear-gradient(top,#0b0b0b,#333131);
    }
    .btn-gold{
        background:#c1a476;
        line-height: .2rem;
        background:-moz-linear-gradient(left,#c1a476,#e4d3af);
        background:-webkit-linear-gradient(left,#c1a476,#e4d3af);
    }
    .mt1{
        vertical-align: -.18rem;
    }
    .ml2{
        margin-left: .2rem;
    }
</style>

